<template>
  <div class="menu-item-sub" v-for="sub in menuSubList" :key="sub.category" @click="selectMenu(sub)">
    <el-icon :size="18" class="icon">
      <component :is="sub.icon" />
    </el-icon>
    <span class="text">{{ sub.name }}</span>
  </div>
</template>

<script setup>
import { Promotion } from '@element-plus/icons-vue';

import { defineEmits } from 'vue';

const emit = defineEmits(['menuSelected']);

const selectMenu = (menu) => {
  emit('menuSelected', menu);
};

const menuSubList = [
  {
    icon: Promotion,
    name: "分享记录",
    category: "shareRecords",
    path: "/main/video"
  },
];
</script>

<style scoped lang="scss">
.menu-item-sub {
  display: flex;
  align-items: center;
  justify-content: center;  /* 水平居中 */
  text-align: center;
  line-height: 40px;
  padding: 8px 0;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease;
  &:hover {
    background: #f3f3f3;
  }
  .icon {
    font-size: 16px;
    margin-right: 20px; /* 减少图标和文字的间距 */
  }
  .text {
    font-size: 16px;
    font-weight: 400;
  }
}

.active {
  background: #eef9fe;
  .icon {
    color: #05a1f5;
  }
  .text {
    color: #05a1f5;
  }
}

.tips {
  margin-top: 10px;
  color: #888888;
  font-size: 13px;
}
</style>
